<template>
    <!-- 功能区 -->
    <div class="fun">
        <!-- singer -->
        <div
            @click="paintingToggle(!showToggle)"
        >
            <div class="logo"></div>
        </div>
        <div>
            <div class="logo"></div>
        </div>
        <div>
            <div class="logo"></div>
        </div>
        <div>
            <div class="logo"></div>
        </div>
        
        <!-- volume -->
        <div>
            <div 
                class="logo"
                @click="toggleShow"
            ></div>
            <div 
                class="volume"
                v-show="volumeShow"
                >
                <div 
                    class="progress"
                    ref="progressRef"
                    @mousedown="handlerProgress"
                >
                    <div class="current-progress">
                        <div 
                            class="btn"
                            @mousedown="draw"
                        >
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- look -->
        <Look></Look>

        <!-- playlist -->
        <PlayList></PlayList>
    </div>
    

    <!-- 歌词 -->
    <div class="painting" v-show="showToggle" >
        <div class="lyricWrap" ref="lyricWrapRef"></div>
    </div>
</template>

<script setup>
    import { ref, getCurrentInstance, inject } from 'vue';
    const props = defineProps(['audio', 'id'])
    const axios = getCurrentInstance().proxy.$http;
    const emitter = inject('emitter');
    // 音量功能
    let volumeShow = ref(false);
    const toggleShow = () => {
        volumeShow.value = !volumeShow.value;
    }
    const progressRef = ref();
    let currentVolume = ref(1);
    const move = (e) => {
        const y = parseInt(progressRef.value.getBoundingClientRect().y);
        const currentHeight = 100 - (e.clientY - y)
        if(currentHeight <= 100 && currentHeight >= 0) {
            progressRef.value.children[0].style.height = currentHeight + 'px';
            if(props.audio) {
                props.audio.volume = currentHeight / 100;
                currentVolume.value = currentHeight / 100; 
            }
        }
    }

    const up = () => {
        document.removeEventListener('mousemove', move);
        document.removeEventListener('mouseup', up);
    }
    const draw = (e) => {
        e.stopPropagation();
        document.addEventListener('mousemove', move)
        document.addEventListener('mouseup', up)
    }
    const handlerProgress = (e) => {
        e.stopPropagation(); 
        move(e);
    }
    
    document.addEventListener('mousedown', () => {
        volumeShow.value = false;
    })

    defineExpose({
        currentVolume,
    })


    // 歌词功能
    emitter.on('lyricInt', () => {
        textHtml.value = '';
        paintingToggle(showToggle.value);
    })

    let showToggle = ref(false);
    let textHtml = ref('');
    let lyricWrapRef = ref();
    const paintingToggle = async (key) => {
        textHtml.value = '';
        if(props.id) {
            showToggle.value = key;
            let { data }  = await axios.get(`/lyric?id=${props.id}`);
            data = data.lrc.lyric;
            data = data.split('\n');
            const len = data.length - 1;
            data.forEach((value, index) => {
                if(index === len) return
                value = value.split(']')
                value[0] = value[0].slice(1).split('.')[0];
                let time = value[0].split(':');
                time = time[0] * 60 + parseInt(time[1]);
                textHtml.value += `
                    <p id="s${time}">${value[1]}</p>
                `
            })
            lyricWrapRef.value.innerHTML = textHtml.value
        }
    }
   
    let oldElement = document.getElementById('s0');
    emitter.on('selectLyric', currentTime => {
        let lyrics = document.getElementById(`s${currentTime}`)
        if(lyrics) {
            if(oldElement) {
                oldElement.style.color = 'rgb(189, 206, 149)';
                oldElement.style.fontSize = '12px'; 
            }
            oldElement = lyrics; 
            lyrics.style.color = 'aqua';
            lyrics.style.fontSize = '18px';
            lyricWrapRef.value.style.top = -lyrics.offsetTop + 'px';
        } 
    })

    


    // look
    import Look from './Look.vue'

    // playList
    import PlayList from './playList.vue'
</script>

<style lang='less' scoped>
.fun {
    width: 23%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    div {
        width: 25px;
        height: 25px;
        cursor: pointer;
        position: relative;
        .logo{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            &:hover{
                box-shadow: 0 0 5px 1px white inset;
            }
            &:nth-child(1) {
                background: url(../../../assets/img/painting.png) no-repeat;
                background-size: 80% 80%;
                background-position: 50% 50%;
            }
        }
        &:nth-child(2) .logo {
            background: url(../../../assets/img/collectionpng.png) no-repeat;
            background-size: 80% 80%;
            background-position: 50% 50%;
        }
        &:nth-child(3) .logo {
            background: url(../../../assets/img/share.png) no-repeat;
            background-size: 80% 80%;
            background-position: 50% 50%;
        }
        &:nth-child(4) .logo {
            background: url(../../../assets/img/separate.png) no-repeat;
            background-size: 80% 80%;
            background-position: 50% 50%;
            cursor: default;
            &:hover {
                box-shadow: none;
            }
        }


        &:nth-child(5) {
            .logo{
                background: url(../../../assets/img/volume.png) no-repeat;
                background-size: 80% 80%;
                background-position: 50% 50%;
                position: relative;
            }
            .volume{
                width: 30px;
                height: 130px;
                position: absolute;
                background-color:rgba(10, 10, 10, 0.9);
                bottom: 37px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                align-items: center;
                justify-content: center;
                .progress{
                    width: 5px;
                    height: 100px;
                    background-color: black;
                    border-radius: 5px;
                    position: relative;
                    .current-progress{
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                        background-color: #ba0b0b;
                        position: absolute;
                        bottom: 0px;
                        .btn{
                            width: 15px;
                            height: 15px;
                            background-color: white;
                            border-radius: 50%;
                            position: absolute;
                            top: -7.5px;
                            left: 50%;
                            transform: translateX(-50%);
                            div{
                                width: 50%;
                                height: 50%;
                                background-color: #ba0b0b;
                                border-radius: 50%;
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                            }
                        }
                    }
                }
            }
        }
      
    }
}

.painting{
    z-index: 2;
    width: 250px;
    height: 300px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    overflow: hidden;
    background: rgba(10, 10, 10, 0.9);
    right: 0px;
    top: -300px;
    border-top-left-radius: 5px;
    color: rgb(189, 206, 149);
    font-size: 12px;
    
    .lyricWrap{
        width: 100%;
        height: auto;
        position: absolute;
        margin-top: 150px;
        top: 0px;
    }
}
</style>